<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<html>
<head>
    <meta charset="UTF-8">
    <script src="/js/axios.js/"></script>
    <script src="/js/vue.js"></script>
    <script src="/el/element.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/mystyle.css" >
    <link rel="stylesheet" type="text/css" href="/el/element.css" />
    <title>登录</title>
</head>
<body>
<div id="app" style="text-align: center;margin-top: 20px">
    <div th:replace="~{common/head-index::head}"></div>
    <div style="margin-top: 80px">
        <h3>登录页面</h3>
        <p>账号：<el-input v-model='user.username' placeholder="请输入账号"  style="width: 300px" />
        </p>
        <p>密码：<el-input v-model='user.password' placeholder="请输入密码" show-password style="width: 300px"/>
    </div>
    </p>
    <el-button @click="login()">登陆</el-button>
    <el-button><a href="/api/public/go2Add">注册</a></el-button>

</div>

</body>
<script>
    var app = new Vue({
        el : "#app",
        data : {
            user : {
                username : "",
                password  : "",
            }
        },
        methods : {
            login() {
                let _this = this
                console.log(this.user)
                axios({
                    url : "/api/public/login",
                    method : "post",
                    headers:{ 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
                    params:_this.user

                }).then(function (resp) {
                    console.log(resp.data)
                    if (resp.data.code==0){
                        _this.$message({
                            message: '登录成功！',//提示的信息
                            type:'success',　　//类型是成功
                            duration:500,　　//显示时间, 毫秒。设为 0 则不会自动关闭，建议1200
                            onClose:()=>{
                                top.location.href =resp.data.action;
                            }
                        });
                    }else{
                        console.log(resp.data)
                        _this.$message({
                            message: resp.data.msg,//提示的信息
                            type:'error',
                        });
                    }
                });
            },
        },
        mounted() {
            let _this = this;
        }
    })
</script>

</html>